<template>
	<view class="content">
		<z-paging ref="paging" v-model="formList" @query="get_form_list" :default-page-size="20">
			<template slot="top">
				<view class="bartop"></view>
				<view class="cu-bar">
					<view class="action">
						<text class="cuIcon-back text-gray" @tap="goBack"></text> 返回
					</view>
					<view class="text-lg text-bold">
						已审批填报管理
					</view>
					<view class="action"></view>

					<view class="action">
						<text class="text-lg" style="color: #13227a;" @tap="filter">筛选</text>
					</view>
				</view>
			</template>

			<view v-if="formList.length>0" class="cu-list menu">
				<view v-for="(item,index) in formList" :key="index" @click="showDetail(item)" class="cu-item"
					:style="index%2==0?'background:#fff':'background:#dedede' ">
					<view class="item margin-top-sm">
						<text>订单号：{{item.orderId}}</text>
						<text>型号：{{item.productName}}</text>
					</view>
					<view class="item margin-bottom-sm">
						<text>组别：{{item.groupZ}} </text>
						<text>操作工：{{item.operatorName}}</text>
					</view>
					<!-- <image class="item-img" src="../../../static/approve.png" mode="heightFix"></image> -->
				</view>
			</view>
		</z-paging>
		<view class="cu-modal" :class="modalName=='Approve'? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">审批意见</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<input placeholder="请输入审批意见" type="text" v-model="approveSuggest">
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-purple" @tap="hideModal">取消</button>
						<button class="cu-btn bg-purple margin-left" @tap="confirmModal">确定</button>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal drawer-modal justify-end" :class="modalName=='DrawerModalR'?'show':''" @tap="hideModal"
			:style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
			<view class="cu-dialog basis-lg " @tap.stop="">
				<view class="cu-form-group">
					<view class="title">班次</view>
					<picker @change="ClassesChange" :value="classes.newindex" :name="classes.key" :range="classes.types"
						:data-current="classes.newindex" range-key="name">
						<view v-if="classes.newindex == -1" class="picker">
							请选择班次
						</view>
						<view v-else class="picker">
							{{classes.types[classes.newindex].name}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">机台编号</view>
					<picker @change="NumberChange" :name="machineNumber.key" :value="machineNumber.newindex"
						:range="machineNumber.types" range-key="name">
						<view v-if="machineNumber.newindex == -1" class="picker">
							请选择机台编号
						</view>
						<view v-else class="picker">
							{{ machineNumber.types[machineNumber.newindex].name}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">操作工</view>
					<picker v-if="operator.types" @change="OperatorChange" :name="operator.key"
						:value="operator.newindex" :range="operator.types" range-key="trueName">
						<view v-if="operator.newindex == -1" class="picker">
							请选择操作工
						</view>
						<view v-else class="picker">
							{{ operator.types[operator.newindex].trueName }}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">开始时间</view>
					<picker mode="date" :value="startDate" @change="StartDateChange">
						<view v-if="startDate == null" class="picker">
							请选择开始时间
						</view>
						<view v-else class="picker">
							{{startDate}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">结束时间</view>
					<picker mode="date" :value="endDate" @change="EndDateChange">
						<view v-if="endDate == null" class="picker">
							请选择结束时间
						</view>
						<view v-else class="picker">
							{{endDate}}
						</view>
					</picker>
				</view>
				<view class="cu-bar bg-white justify-around">
					<view class="action">
						<button class="cu-btn line-green text-purple" @tap="resetModal">重置</button>
						<button class="cu-btn bg-purple margin-left" @tap="confirmModal">筛选</button>
					</view>
				</view>
			</view>
			<!-- <view class="cu-list menu text-left">
					<view class="cu-item arrow" v-for="(item,index) in 5" :key="index">
						<view class="content">
							<view>Item {{index +1}}</view>
						</view>
					</view>
				</view> -->
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// "id": null, // id
				// "class": null, //班次
				// "order_id": null, //订单号
				// "product_id": null, //产品名称
				// "number": null, //机台编号
				// "unit": null, //单位
				// "material_id": null, //用料
				// "colour_id": null, //颜色/色粉
				// "order_number": null, //排产数量
				// "qualified_quantity": null, //生产合格数量
				// "working_hours": null, //实际生产工时
				// "scrapped_part": null, //残品数量
				// "operator": null, //操作工
				// "accumulate_number": null, //合格累计数量
				// "debugging_time": null, //换模调试时间
				// "change_material_time": null, // 换料烘料时间
				// "weight": null, //产品单重
				// "abnormal_time": null, //其他异常事件
				// "remarks": null, //备注
				classes: {
					name: '班次',
					newindex: -1,
					key: 'classes',
					types: [{
						id: 1,
						name: '白班'
					}, {
						id: 2,
						name: '晚班'
					}]
				},
				product: {
					newindex: -1,
					key: 'productId',
					name: '产品名称',
					types: this.$cache.get("products")
				},
				machineNumber: {
					newindex: -1,
					key: 'number',
					name: '机台编号',
					types: this.$cache.get("machineNumbers")
				},
				operator: {
					newindex: -1,
					key: 'operator',
					name: '操作工',
					types: null
				},
				CustomBar: this.CustomBar,
				formList: [],
				modalName: null,
				approveSuggest: "",
				startDate: null,
				endDate: null
			}
		},
		methods: {

			onShow() {
				if (this.$refs.paging) {
					this.$refs.paging.reload()
				}
				// this.CustomBar = 0
			},
			onLoad(options) {
				this.getOperator()
			},

			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			ClassesChange(e) {
				this.classes.newindex = e.detail.value
			},

			NumberChange(e) {
				this.machineNumber.newindex = e.detail.value
			},
			ClassesChange(e) {
				this.classes.newindex = e.detail.value
			},
			OperatorChange(e) {
				this.operator.newindex = e.detail.value
				console.log(this.operator.newindex)

			},
			StartDateChange(e) {
				this.startDate = e.detail.value
			},
			EndDateChange(e) {
				this.endDate = e.detail.value
			},
			hideModal(e) {
				this.modalName = null
			},
			resetModal() {
				this.classes.newindex = -1
				this.machineNumber.newindex = -1
				this.operator.newindex = -1
				this.startDate = null
				this.endDate = null
			},
			confirmModal(e) {
				this.$refs.paging.reload()
				this.hideModal()

			},
			get_form_list(pageNo, pageSize) {
				let param = {}

				if (this.classes.newindex != -1) {
					param.classes = this.classes.types[this.classes.newindex].id
				}
				if (this.machineNumber.newindex != -1) {
					param.number = this.machineNumber.types[this.machineNumber.newindex].id
				}
				if (this.operator.newindex != -1) {
					param.operator = this.operator.types[this.operator.newindex].userId
				}
				if (this.startDate != null) {
					var date = new Date(this.startDate);
					var time = date.getTime() / 1000;
					param.startTime = time
				}
				if (this.endDate != null) {
					var date = new Date(this.endDate);
					var time = date.getTime() / 1000;
					param.endTime = time
				}
				console.log(param)
				this.$Request.post(this.$httpApi.assemble.historyAllList + "?page=" + pageNo + "&size=" + pageSize, param)
					.then(
						res => {
							if (res.code != 200) {
								uni.showToast({
									title: res.message,
									icon: 'none',
									duration: 2000
								});
							} else {
								console.log(res)
								try {
									uni.hideLoading()
									this.$refs.paging.complete(res.data.list)
								} catch (e) {
									this.$refs.paging.complete([])
									uni.hideLoading()
								}
							}
						})
			},
			getOperator() {
				this.$Request.post(this.$httpApi.operator.operatorAllList).then(res => {
					if (res.code == 200) {
						this.operator.types = res.data
					}
				})
			},

			showDetail(item) {
				uni.navigateTo({
					url: '/pages/planner/assemble/form_detail/form_detail?id=' + item.id + "&operator=" + item
						.operatorName +
						"&productName=" + item.productName
				})
			},

			filter() {
				this.modalName = 'DrawerModalR'
			}
		}
	}
</script>

<style>
	.cu-list.menu>.cu-item {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item-img {
		/* width: 50rpx; */
		height: 80rpx;
		position: absolute;
		right: 0;
		top: 15rpx
	}

	.bartop {
		z-index: 999;
	}

	.cu-modal {
		z-index: 99;
	}
</style>
